<template>
    <div class="app-box">
        <el-config-provider :locale="locale" :value-on-clear="null">
            <template v-if="showPage">
                <el-container>
                    <el-aside id="left-aside">
                        <pub-left />
                    </el-aside>
                    <el-main id="app-main" :class="{ showSubMenu }">
                        <pub-header :showSubMenu="showSubMenu" />
                        <div class="main-box clearfix mt-50">
                            <router-view v-slot="{ Component }">
                                <keep-alive :include="keepAliveList">
                                    <component :is="Component"></component>
                                </keep-alive>
                            </router-view>
                        </div>
                        <pub-footer
                            v-if="showFooter"
                            class="footer"
                            company="花数通技术支持"
                        ></pub-footer>
                    </el-main>
                </el-container>
            </template>

            <template v-else>
                <router-view v-slot="{ Component }">
                    <keep-alive :include="keepAliveList">
                        <component :is="Component"></component>
                    </keep-alive>
                </router-view>
            </template>
        </el-config-provider>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@stores/user";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import PubFooter from "@components/PubFooter.vue";
import PubHeader from "@components/PubHeader.vue";
import PubLeft from "@components/PubLeft.vue";

import EventBus from "@common/event-bus"; // EventBus事件总线，任意组件通信

const route = useRoute();
const userStore = useUserStore();

onMounted(() => {});
onBeforeUnmount(() => {
    EventBus.all.clear();
});
const locale = ref(null);
locale.value = zhCn;

const showSubMenu = computed(() => userStore.showSubMenu);

const keepAliveList = computed(() => userStore.keepAliveList);

const showFooter = computed(() => route.name === "Home");

// const showPage = computed(() => route.path !== '/')
const showPage = ref(false);
watch(
    () => route.path,
    (val) => {
        EventBus.emit("route_paths", val);
        if (val === "/" || val === "/Shop/page/pageAdd") {
            showPage.value = false;
        } else {
            showPage.value = true;
        }
    },
    {
        immediate: true,
    }
);
</script>

<style lang="less">
@import (once) "@assets/css/common.less";

.app-box {
    width: 100%;
    height: 100%;
}

#left-aside {
    width: @first-menu-width;
    transition: all 0.2s;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 11;
    overflow: hidden;
    background-color: #1a242c;
}

#app-main {
    padding: 0;
    margin-left: @first-menu-width;
    min-width: 960px;
    padding-bottom: 10px;
    position: relative;
    display: flex;
    flex-direction: column;

    &.showSubMenu {
        margin-left: calc(@first-menu-width + @sub-menu-width);
    }
}

.el-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.main-box {
    padding: @padding-sm;
    // min-height: 500px;
    background: #f6f6f6;
    position: relative;
}

.footer {
    // position: absolute;
    // bottom: 20px;
    // left: 50%;
    // transform: translateX(-50%);
}

.hide-upload-btn .el-upload--picture-card {
    display: none;
}
</style>
